<template>
  <div>
      <!-- 爸妈搜日历 -->
      <calendar
        :curYear="curYear"
        :curMonth="curMonth"
        :day="day"
        remark_show="true" 
        remark_style="userdefined"
        :count_txt_user="count_txt_user"
        circle_show="true"
        pitch_on="circle"
        :mystatus="mystatus"
        selectedDate="2019-04-28"
        isClick="true"
        weekheight="120"
        :speciallist="speciallist"
        isTodaybtn="true"
        todaybtn_txt="今天"
        calendar-style=""
        header-style="header-style"
        weektitle-style="weektitle-style"
        datatitle-style="datatitle-style"
        dotcolor-o="dotcolor-o"
        dotcolor-t="dotcolor-t"
        headline-style="headline-style"
        datefont-style="datefont-style"
        restcolor-style="restcolor-style"
        active-coloro="active-coloro"
        active-colort="active-colort"
        userdefined_style="userdefined_style"
        counttxt_style="counttxt_style"
        countber_style="countber_style"
        txt_style="txt_style"
        todaybtn-style="todaybtn-style"
        @nextMonth="nextMonth"
        @prevMonth="prevMonth"
        @selectDate="selectDate"
        @chooseDate="chooseDate"
        @gotoday="gotoday"
        />

  </div>
</template>

<script>

export default {
  data () {
    return {
      curYear: new Date().getFullYear(), // 年份
      curMonth: new Date().getMonth() + 1,// 月份 1-12
      day: new Date().getDate(), // 日期 1-31 若日期超过该月天数，月份自动增加

      // 原点状态  状态  0:未出勤 1:正常出勤 2:事假 3:病假 9:休息
      mystatus: [0, 0, 1, 1, 2, 2, 3, 3, 9, 9, 1, null, 1, 2, 1, 9, 9, null, 0, 1, 0, 3, 9, 9, 1, 1, 0, 0, 1, 9],

      // 备注类型为userdefined的备注信息
      count_txt_user:[
        { 'count_txt': '04-28', 'count_ber': '没吃药' },
        { 'count_txt': '04-16', 'count_ber': '吃药多' },
        { 'count_txt': '04-30', 'count_ber': '吃错药' },
      ],

      // 自定义日期下方的文字
      speciallist: [
        { date: '2019-04-11', background: 'yellow',text:'7000',color:'orange' },
        { date: '2019-04-12', background: 'red', text:'8000', color:'orange'  },
        { date: '2019-04-13', background: 'red', text:'9000', color:'orange'  },
        { date: '2019-04-14', background: 'red', text:'10000', color:'orange'  },
        { date: '2019-04-15', background: 'red', text:'4000', color:'orange'  },
        { date: '2019-04-16', background: 'red', text:'12000', color:'orange'  },
        { date: '2019-04-17', background: 'red', text:'6000', color:'orange'  },
      ]
    }
  },
  onLoad () {
    wx.request({
      url: 'https://easy-mock.com/mock/5cb5988e5b8cc913a423de05/web/getwerun', //开发者服务器接口地址",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
        console.log(res)
        this.count_txt_user = res.data.count_txt_user
        this.speciallist = res.data.speciallist
      },
      fail: () => {},
      complete: () => {}
    });
  },
  methods: {
    /**
    * 点击上个月
    */
    nextMonth (e) {
      console.log(e)
      const currentYear = e.mp.detail.currentYear;
      const currentMonth = e.mp.detail.currentMonth;
      
    },
    // 前一个月
    prevMonth (e) {
      console.log(e)
    },
    // 点击日期
    selectDate (e) {
      console.log(e)
      // console.log(e.mp.detail.status)
    },
    // 选择器选择日期
    chooseDate (e) {
      console.log(e)
    },
    // 今天
    gotoday (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss">
// 日历整体样式
.calendar-style {
  
}
/* 主题面板样式  */
.header-style{
  background: #1ae646;  
  color: #fff;
}
// 周标题面板样式
.weektitle-style {
  background-color: rgb(255, 0, 0);
}
// 日期面板样式
.datatitle-style {
  background-color: rgb(222, 233, 241);
}
// 周六日样式
.restcolor-style {
  color: rgb(50, 53, 248);
}
// 点击选中颜色
.active-coloro {
  color: #fff;
  background: #369ceb;
}
// 点击其他日期，当天的颜色
.active-colort {
  color: #fff;
  background: #ebd6ec;
}

/* 出勤  */
.dotcolor-o{
  background-color: #188be4 !important;  
}
/* 未出勤  */
.dotcolor-t{
  background-color: #FF7F50 !important;  
}

/* 备注信息为headline样式  */
.headline-style{
  background: #8930f5 !important;
  display: flex;
  justify-content: space-around;
}
/*key的样式*/
.counttxt_style{
  color: #333;
}
/*vuale的样式*/
.countber_style{
  color: #f81238;
}

// 日期下文字样式
.txt_style {
  color: rgb(244, 7, 252);
}

// 今天
.todaybtn-style {
  background: rgb(238, 135, 183) !important;
  color: #fff !important;
}
</style>
